<template>
    <div>
        <city-list
            :isCountry="this.isCountry"
            :isCity="this.isCity"
            :isViews="this.isViews"
            :country="this.country"
            :city="this.city"></city-list>
        <div class="city-content">
            <card
                v-for="(item, index) in list"
                operate=1
                :title="item.title"
                type="city-list"
                :key="item.id"
                :viewsId="item.viewsId"
                :bg="item.img"></card>
        </div>
    </div>
</template>

<script>
import CityList from "@/components/CityList";
import Card from "@/components/Card";
import { Util } from "@/js/Util";
export default {
  components: {
    CityList,
    Card
  },
  mounted() {
    this.hasQuery();
    this.getList();
  },
  data() {
    return {
      isCountry: false,
      isCity: false,
      isViews: true,
      country: "",
      city: "",
      list: []
    };
  },
  methods: {
    hasQuery() {
      let countryId = this.$route.query.countryId,
        country = this.$route.query.country,
        cityId = this.$route.query.cityId,
        city = this.$route.query.city;
      if (!countryId || !country || !cityId || !city) {
        this.$router.push({ name: "juejia_index" });
        return false;
      }
    },
    getList() {
      this.$vux.loading.show({ text: "Loading" });
      let id = this.$route.query.cityId,
        country = decodeURIComponent(this.$route.query.country),
        city = decodeURIComponent(this.$route.query.city);
      this.country = country;
      this.city = city;
      this.$http.get("scenery/SceneryList/v1?index=0&size=0&cityId=" + id).then(
        response => {
          this.$vux.loading.hide();
          let result = response.data;
          if (result.code) {
            this.$vux.toast.text(result.message, "bottom");
            return false;
          }
          for (let i in result.data) {
            let item = {
              viewsId: result.data[i].id,
              title: result.data[i].name,
              img: result.data[i].picture
            };
            this.list.push(item);
          }
        },
        response => {
          Util.errorWarning(this);
        }
      );
    }
  }
};
</script>

<style lang="less" scoped="scoped">
.city-content {
  padding-top: 5.5rem;
}
</style>